<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>期末练习作业</title>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
    <style type="text/css">
    body {
        width: 900px;
        margin: 0 auto;
    }

    #main {
        width: 600px;
        height: 400px;
    }
    </style>
</head>

<body>
    <h1>2018年最新沪深股市发行量（单位:万）</h1>
    <div id="main"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        color: ['#A52A2A'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['农业银行', '洛阳钼业', '中国联通', '工商银行', '安阳钢铁', '中国银行', '南京证券', '包钢股份', '保利地产', '建设银行'],
            axisTick: {
                alignWithLabel: true
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '总发行量',
            type: 'bar',
            barWidth: '60%',
            data: [36.19, 33.71, 23.6, 22.19, 13.85, 13.49, 10.4, 9.95, 8.79, 7.47]
        }]
    };
    myChart.setOption(option);
    </script>
</body>

</html>